<template>
  <div>
    <h1>姓名: {{ name }}</h1>
    <h1>年龄: {{ age }}</h1>
    <h1>薪资: {{ salary }}k</h1>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="salary++">涨薪</button>
  </div>
</template>
  <script>
import { reactive, toRef,toRefs } from "vue";

export default {
  name: "Demo",
  setup() {
    let person = reactive({
      name: "JJ",
      age: 18,
      job: {
        job1: {
          salary: 20
        }
      }
    });

    return {
      person,
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salary:toRef(person.job.job1,'salary')
    //   ...toRefs(person)
    }
  }
};
</script>
    
    <style>
</style>
    
   